import Taro from '@tarojs/taro';
import {useState} from "react";
import {View, Image} from "@tarojs/components";
import Item from './item'

export default function () {
  const initData = [
    {
      course: '语文',
      topic: 'xxxxxxxx',
      status: '未交'
    },
    {
      course: '语文',
      topic: 'xxxxxxxx',
      status: '未交'
    }
  ]
  const [list, setList] = useState(initData);
  let nextlist = list
  const [tabImgs] = useState([
    {
      url: require('../../../images/zhaopian.png'),
      clickFn: () => {
        console.log('chooseImage')
        Taro.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
          success: function (res) {
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            const obj = nextlist.find(item => item.type === 'images')
            if (obj) {
              obj.list.push({
                url: res.tempFilePaths[0]
              })
              nextlist = [
                ...list,
                ...[obj]
              ]
              setList(nextlist)
            } else {
              nextlist = [
                ...list,
                {
                  type: 'images',
                  list: [{
                    url: res.tempFilePaths[0]
                  }]
                }
              ]
              setList(nextlist)
            }
          }
        }).then(() => {})
      }
    },
    {
      url: require('../../../images/xiangji.png')
    },
    {
      url: require('../../../images/xiangji.png')
    }
  ]);
  return (
    <View className='bigbox-itembox'>
      <View className='top'>
        <View className='top-left title'>语文</View>
        <View className='top-right'>
          {
            tabImgs.map((item, index) => <View onClick={item.clickFn} className='itm' key={index}>
              <Image className='images' src={item.url}></Image>
            </View>)
          }
        </View>
      </View>
      {list.map((item, index) => <Item item={item} setList={setList} key={index} />)}
    </View>
  )
}
